<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<div class="login-container">
    <h2>购物平台登录</h2>
    <form id="loginForm" onsubmit="event.preventDefault(); handleLogin();">
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" name="username" class="input-field" placeholder="请输入用户名" required />
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" name="password" class="input-field" placeholder="请输入密码" required />
        </div>
        <div class="button-group">
            <button type="submit" class="btn btn-primary">登录</button>
            <button type="button" class="btn btn-primary" onclick="window.location.href='register.html'">注册</button>
        </div>
    </form>
</div>

<script>
    async function handleLogin() {
        // 获取输入的用户名和密码
        const username = document.getElementById("username").value;
        const password = document.getElementById("password").value;

        // 打印前端获取的用户名和密码，检查是否正确
        console.log("用户名: ", username);  // 打印用户名
        console.log("密码: ", password);    // 打印密码

        // 检查用户名和密码是否为空
        if (!username || !password) {
            alert("请输入用户名和密码");
            return;
        }

        // 发送 AJAX 请求到后端
        try {
            const response = await fetch("http://localhost:8080/api/auth/login", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ username, password })  // 发送的数据
            });

            const data = await response.json(); // 获取返回的 JSON 数据

            // 打印返回的数据，便于调试
            console.log("响应数据：", data);

            // 判断响应状态
            if (data.message === "登录成功") {
                // 登录成功
                localStorage.setItem("jwt_token", data.token);  // 存储 JWT
                alert("登录成功！");
                window.location.href = "index.html";  // 跳转到仪表盘
            } else {
                // 显示后端返回的错误信息
                alert(data.message);  // 如果失败，弹出错误消息
            }
        } catch (error) {
            console.error("登录请求错误:", error);  // 打印请求错误
            alert("网络错误，请稍后重试: " + error.message);
        }
    }
</script>
</body>
</html>
